<template>
	<view class="container_box">
		<view class="item" v-for="(item, index) in timeSlotCostData" :key="index" :class="{'active_item': item.currentTimeSlotStatus}">
      <view class="current-line">
        <view class="current-item">
          <view class="title">时间段</view>
          <view class="time_solt_box sec-line">
            <view class="solt_state" v-if="item.busyStatus==1">
              <text>谷</text>
            </view>
            <view class="solt_state solt_flat" v-if="item.busyStatus==2">
              <text>平</text>
            </view>
            <view class="solt_state solt_peak" v-if="item.busyStatus==3">
              <text>峰</text>
            </view>
          </view>
          <view class="trd-line">{{item.period}}</view>
        </view>
        <view class="type">
          <view class="title">类型</view>
          <view class="sec-line title">会员</view>
          <view class="sec-line title">非会员</view>
        </view>
        <view class="current-item">
          <view class="title">电价(元/度)</view>
          <view class="trd-line price_val">￥{{ (Number(item.eleFeeVip) + Number(item.serFeeVip)).toFixed(2) }}</view>
          <view class="trd-line">￥{{ (Number(item.eleFee) + Number(item.serFee)).toFixed(2) }}</view>
        </view>
        <view class="current-item">
          <view class="title">服务费(元/度)</view>
          <view class="trd-line price_val">￥{{item.serFeeVip}}</view>
          <view class="trd-line">￥{{item.serFee}}</view>
        </view>
      </view>
      <view class="price_item">
        <text>电费：{{item.eleFee}}元/度</text><text>服务费：{{item.serFee}}元/度</text>
      </view>
			<view class="active_text">
				<text>当前时段</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getStationInfo } from '@/api/index'
	import { feeSplitVal, checkAuditTime } from '@/utils/common'
	export default {
		data() {
			return {
				stationId: '',
				stationDetails: {}, // 站点详情
				timeSlotCostData: [], // 各时段电费服务费
				currentTimeSlot: '', //当前时段
				currentTimeSlotPrice: 0, // 当前时段价格
			}
		},
		onLoad(option) {
			console.log(option)
			this.stationId = option.stationId
			this.getStationDetailsFn()
		},
		methods: {
			// 获取站点详情
			getStationDetailsFn(){
				getStationInfo({
					stationId: this.stationId
				}).then(res => {
					console.log(res,'stationInfo')
					if (res ) {
						this.stationDetails = res
						this.timeSlotCostData = this.stationDetails.periodPriceList
						if (this.timeSlotCostData.length) {
							for(let i=0; i<this.timeSlotCostData.length; i++) {
								this.timeSlotCostData[i].currentTimeSlotStatus = false
								if (checkAuditTime(this.timeSlotCostData[i].period.split('~')[0],this.timeSlotCostData[i].period.split('~')[1])) {
									this.timeSlotCostData[i].currentTimeSlotStatus = true
									this.currentTimeSlot = this.timeSlotCostData[i].period
									this.currentTimeSlotPrice = (Number(this.timeSlotCostData[i].eleFee) + Number(this.timeSlotCostData[i].serFee)).toFixed(2)
								}
							}
							console.log(this.timeSlotCostData, 'this.timeSlotCostData')
						}
						
					} else {
						console.log(res, 'error')
					}
				}).catch(error => {
					console.log(error)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container_box{
		padding: 0 30rpx 30rpx 30rpx;
		background-color: #F3F5F7;

		.item{
			position: relative;
			margin-top: 24rpx;
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 24rpx;

      .current-line{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .current-item{
          width: 150upx;
        }
        .title{
          font-size: 24upx;
          color: #6A6A6A;
          line-height: 36upx;
        }
        .type{
          width: 80upx;
        }
      }

      .sec-line{
        height: 44upx;
        line-height: 44upx;
        margin-top: 24upx;
      }

      .trd-line{
        font-weight: 500;
        height: 44upx;
        line-height: 44upx;
        margin-top: 24upx;
        font-size: 28upx;
        color: #1B1B1B;
      }
      .price_val{
        color: #E56646;
      }

			.time_solt_box{
				display: flex;
				align-items: center;
				.solt_state{
					width: 44rpx;
					height: 44rpx;
					line-height: 44rpx;
          background: linear-gradient(138.72deg, #66E078 3.34%, #2FBC44 91.2%);
          border-radius: 12upx;
					font-weight: 600;
					color: #FFFFFF;
					font-size: 24rpx;
					text-align: center;
				}
				.solt_flat{
          background: linear-gradient(138.72deg, #76C8FD 3.34%, #53B2EE 91.2%);
        }
				.solt_peak{
          background: linear-gradient(138.72deg, #F57546 3.34%, #FFAB66 91.2%);
        }
				.time_solt{
					padding-left: 16rpx;
					font-weight: 500;
					color: #2D2B2A;
					font-size: 32rpx;
				}
			}
			.total_price{
				display: flex;
				padding-top: 16rpx;
				.member{
					padding-left: 10rpx;
				}
				.title{
					font-size: 26rpx;
					color: #333333;
				}
				.rmb{
					font-weight: 500;
					font-size: 26rpx;
					color: #E56646;
				}
				.price_val{
					font-weight: 500;
					color: #E56646;
					font-size: 38rpx;
				}
				.unit{
					font-weight: 400;
					color: #2D2B2A;
					font-size: 26rpx;
				}
			}
			.price_item{
        margin-top: 20upx;
        border-top: 1upx solid #F0F1F2;
				padding-top: 10rpx;
				text{
					display: inline-block;
					padding: 2rpx 8rpx;
					margin-right: 16rpx;
					//font-weight: 400;
					color: #9D9D9D;
					font-size: 24rpx;
					//background: #F3F5F7;
					border-radius: 4rpx;
				}
			}
			.active_text{
				display: none;
			}
		}
		.active_item{
			position: relative;
			border: 2rpx solid #C2A661;
			box-sizing: border-box;
      overflow: hidden;
      padding-top: 62upx;
			.active_text{
        width: 154upx;
        height: 64upx;
        line-height: 50upx;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
        background-image: url("http://wx.xiongmaovip.com/miniapp/static/chargeFuel/current-time.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        text-align: center;
				//background: linear-gradient(to right, #47C2FF, 50%, #478BFF);
				//border-radius: 0 16rpx 0 16rpx;
				//padding: 8rpx 16rpx;
				text{
					font-weight: 500;
					color: #FFFFFF;
					font-size: 24rpx;
					text-align: center;
				}
			}
		}
	}
</style>
